import React, { Component } from 'react'

import { Layout, Menu, Breadcrumb, Icon, Row, Col } from 'antd';

import logo from '../static/logo.png'

import { Link, Route } from 'react-router-dom'

import Gift from './index/Gift'
import Category from './index/Category'

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

export default class Index extends Component {

    logout = () => {
        sessionStorage.clear()
        this.props.history.push('/login')
    }

    render() {
        return (
            <Layout>
                {/* 导航条 */}
                <Header className="header">
                    <Row>
                        <Col span={3}>
                            <img alt="logo" src={logo} />
                        </Col>
                        <Col span={20}>
                            <Menu
                                theme="dark"
                                mode="horizontal"
                                defaultSelectedKeys={['1']}
                                style={{ lineHeight: '64px' }}
                            >
                                <Menu.Item key="1">数据管理</Menu.Item>
                                <Menu.Item key="2">订单管理</Menu.Item>
                            </Menu>
                        </Col>
                        <Col span={1}>
                            {/* eslint-disable-next-line */}
                            <a onClick={this.logout}>退出</a>
                        </Col>
                    </Row>
                </Header>
                {/* 下面 */}
                <Layout>
                    {/* 左 */}
                    <Sider width={200} style={{ background: '#fff' }}>
                        <Menu
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        style={{ height: '100%', borderRight: 0 }}
                        >
                            <SubMenu
                                key="sub1"
                                title={
                                <span>
                                    <Icon type="user" />
                                    数据管理
                                </span>
                                }
                            >
                                <Menu.Item key="1"><Link to="/gift">礼物管理</Link></Menu.Item>
                                <Menu.Item key="2"><Link to="/category">分类管理</Link></Menu.Item>
                                <Menu.Item key="3">订单管理</Menu.Item>
                                <Menu.Item key="4">房间管理</Menu.Item>
                            </SubMenu>
                        </Menu>
                    </Sider>
                    {/* 右 */}
                    <Layout style={{ padding: '0 24px 24px' }}>
                        {/* 面包屑 */}
                        <Breadcrumb style={{ margin: '16px 0' }}>
                            <Breadcrumb.Item>首页</Breadcrumb.Item>
                            <Breadcrumb.Item>数据管理</Breadcrumb.Item>
                            <Breadcrumb.Item>礼物管理</Breadcrumb.Item>
                        </Breadcrumb>
                        {/* 页面主体 */}
                        <Content
                        style={{
                            background: '#fff',
                            padding: 24,
                            margin: 0,
                            minHeight: 280,
                        }}
                        >
                            {/* 显示子页面 */}
                            <Route path="/category" component={Category} />
                            <Route path="/gift" component={Gift} />
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        )
    }
}
